paint-brush
जेएस एसईओ: खोज परिणामों में उच्च रैंक के लिए जावास्क्रिप्ट का अनुकूलन कैसे करेंद्वारा@hariom47
1,464 रीडिंग
1,464 रीडिंग

जेएस एसईओ: खोज परिणामों में उच्च रैंक के लिए जावास्क्रिप्ट का अनुकूलन कैसे करें

द्वारा Hariom5m2022/10/03
Read on Terminal Reader
Read this story w/o Javascript

बहुत लंबा; पढ़ने के लिए

जावास्क्रिप्ट का पहला संस्करण 1995 में जारी किया गया था और इसे लाइवस्क्रिप्ट नाम दिया गया था। जावास्क्रिप्ट अब एक मानक प्रोग्रामिंग भाषा है जिसका उपयोग वेब ब्राउज़र में इंटरैक्टिव वेब पेज बनाने के लिए किया जाता है। अपने JS और CSS को छोटा करना अतिरिक्त बाइट्स से छुटकारा पाने का एक अच्छा तरीका है। यह ध्यान रखना महत्वपूर्ण है कि मिनिफिकेशन प्रक्रिया आपके कोड की कार्यक्षमता को नहीं बदलती है। आप ब्राउज़र को अपनी स्क्रिप्ट को एसिंक्रोनस रूप से लोड करने के लिए कहने के लिए टैग की defer संपत्ति का उपयोग कर सकते हैं। यह उन स्क्रिप्ट के लिए उपयोगी है जो किसी पृष्ठ के प्रारंभिक प्रतिपादन के लिए महत्वपूर्ण नहीं हैं, बल्कि अतिरिक्त कार्यक्षमता के साथ इसे बढ़ाते हैं।

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - जेएस एसईओ: खोज परिणामों में उच्च रैंक के लिए जावास्क्रिप्ट का अनुकूलन कैसे करें
Hariom HackerNoon profile picture

जावास्क्रिप्ट एक स्क्रिप्टिंग भाषा है जिसे सन माइक्रोसिस्टम्स द्वारा विकसित किया गया था। जावास्क्रिप्ट अब एक मानक प्रोग्रामिंग भाषा है जिसका उपयोग वेब ब्राउज़र में इंटरैक्टिव वेब पेज बनाने के लिए किया जाता है। वेबसाइटों में अन्तरक्रियाशीलता जोड़ने के लिए जावास्क्रिप्ट का सबसे अधिक उपयोग किया जाता है। इसे अक्सर गतिशील व्यवहार प्रदान करने के लिए HTML दस्तावेज़ों में एम्बेड किया जाता है, जैसे उपयोगकर्ता क्रियाओं के आधार पर वेबसाइट पृष्ठ पर प्रदर्शित सामग्री (जैसे, पाठ) को बदलना।

जावास्क्रिप्ट का पहला संस्करण 1995 में जारी किया गया था और इसे लाइवस्क्रिप्ट नाम दिया गया था। 1997 में नेटस्केप ने जावास्क्रिप्ट का अपना कार्यान्वयन शुरू किया जिसे जावास्क्रिप्ट 1.0 कहा जाता है। तब से, जावास्क्रिप्ट व्यापक रूप से अपनाया गया है और अब क्लाइंट-साइड स्क्रिप्टिंग के लिए एक वास्तविक मानक है।

SEO किसी भी वेबसाइट का एक महत्वपूर्ण हिस्सा है, और खोज परिणामों में उच्च रैंक के लिए अपने जावास्क्रिप्ट को अनुकूलित करना एक अच्छा विचार है। आप अपनी जावास्क्रिप्ट को छोटा करके, इसकी लोडिंग को स्थगित करके, HTTP अनुरोधों की संख्या को कम करके, पेज से (और अलग-अलग फाइलों से) अनावश्यक स्क्रिप्ट टैग को हटाकर, और फाइलों को एक फाइल में समेकित करके ऐसा कर सकते हैं यदि वे ऐसा करने के लिए पर्याप्त छोटे हैं, और अधिक।

जेएस और सीएसएस को छोटा करें।

अपने JS और CSS को छोटा करना उन अतिरिक्त बाइट्स से छुटकारा पाने का एक अच्छा तरीका है। यह एक मिनीफायर के साथ किया जा सकता है, जो इसकी कार्यक्षमता को प्रभावित किए बिना आपके स्रोत कोड से अनावश्यक वर्णों को हटा देगा।

खनन प्रक्रिया सफेद स्थान और टिप्पणियों को हटाकर काम करती है, साथ ही जहां संभव हो वहां चर नामों को छोटा कर देती है। उदाहरण के लिए:

 var $div = document.getElementById("myDiv");
<- var नामों का उपयोग करता है, लेकिन अतिरिक्त रिक्त स्थान हटा देता है
 var v_d__e___ = document .getElementById( "m_i_d" );
<- चर को छोटा करता है

यह ध्यान रखना महत्वपूर्ण है कि प्रक्रिया आपके कोड की कार्यक्षमता को नहीं बदलती है; वास्तव में, यदि आवश्यक हो तो आप इस संस्करण को दुभाषिए के माध्यम से चला सकते हैं (हालाँकि हम इसकी अनुशंसा नहीं करेंगे)।

जावास्क्रिप्ट लोड करना स्थगित करें

HTML कोड में, आप ब्राउज़र को अपनी स्क्रिप्ट को एसिंक्रोनस रूप से लोड करने के लिए कहने के लिए टैग की defer संपत्ति का उपयोग कर सकते हैं। यह उन स्क्रिप्ट के लिए उपयोगी है जो किसी पृष्ठ के प्रारंभिक प्रतिपादन के लिए महत्वपूर्ण नहीं हैं, बल्कि अतिरिक्त कार्यक्षमता और सुविधाओं के साथ इसे बढ़ाते हैं।

इन लिपियों को स्थगित करने से उन्हें सामान्य डाउनलोड प्राथमिकता से बाहर लोड करने की अनुमति मिलती है, इसलिए वे सामग्री को तुरंत प्रदर्शित होने से नहीं रोकते हैं। हालांकि, यदि आप प्रमुख स्क्रिप्ट के लिए इस पद्धति का उपयोग करने का प्रयास करते हैं, जिन्हें तुरंत उनकी सभी कार्यक्षमता की आवश्यकता होती है—जैसे कि आपकी साइट का मुख्य नेविगेशन मेनू—यह ठीक से काम नहीं करेगा क्योंकि उन्हें त्वरित लोडिंग समय की आवश्यकता होती है।

defer को लागू करने का नकारात्मक पक्ष यह है कि यह सभी ब्राउज़रों द्वारा समर्थित नहीं है; यह केवल फ़ायरफ़ॉक्स 3+ (और बाद में), इंटरनेट एक्सप्लोरर 10+ (और बाद में), सफारी 5+ और क्रोम 14+ में काम करता है।

HTTP अनुरोधों की संख्या कम करें

HTTP अनुरोधों की संख्या को कम करने का एक तरीका यह है कि आप अपनी सभी CSS और JavaScript फ़ाइलों को एक फ़ाइल में संयोजित करें। यदि आपके पास कोड की कुछ पंक्तियों से अधिक है, तो यह आपके पृष्ठ के वजन को कम करने में एक बड़ी मदद हो सकती है। यदि आपके पास कई छोटी फ़ाइलें हैं, हालांकि, उन्हें एक बड़ी फ़ाइल में संयोजित करना आपके लिए एक विकल्प नहीं हो सकता है क्योंकि उपयोगकर्ता के ब्राउज़र को इसे एक बार में डाउनलोड करने के लिए अतिरिक्त समय की आवश्यकता होगी।

अनावश्यक JavaScript, CSS और HTML हटाएं

सौभाग्य से, खोज के लिए अपने जावास्क्रिप्ट को अनुकूलित करने के लिए आपको मास्टर कोडर होने की आवश्यकता नहीं है। आपको बस कुछ सरल नियमों का पालन करना है:

  1. अप्रयुक्त सीएसएस निकालें।
  2. अप्रयुक्त HTML निकालें।
  3. अप्रयुक्त जावास्क्रिप्ट निकालें।
  4. कोड से अनावश्यक टिप्पणियां और रिक्त स्थान हटाएं (उदाहरण के लिए, "//" या "/* */")।
  5. जावास्क्रिप्ट फ़ाइल में अनावश्यक लाइन ब्रेक, अर्धविराम, कोष्ठक, ब्रेसिज़ और अल्पविराम को हटा दें ताकि वे आपके प्रोजेक्ट में कुछ और न तोड़ें, जब इसे जेनकिंस सीआई सर्वर या ट्रैविससीआई जैसे बिल्ड सर्वर पर Google क्लोजर कंपाइलर या यूग्लिफाईजेएस 2 जैसे टूल द्वारा छोटा किया जाए। सर्वर/आदि…

फ़ाइलों को समेकित करें।

अपनी JavaScript फ़ाइलों को एक फ़ाइल में समेकित करना एक अच्छा विचार है। यह ग्रंट या गल्प जैसे बिल्ड सिस्टम के साथ किया जा सकता है, जो आपको कॉन्सटेनेशन और मिनिफिकेशन जैसे कार्यों का उपयोग करने की अनुमति देता है। यदि आप बिल्डिंग सिस्टम के बारे में नहीं सीखना चाहते हैं, तो ऐसी कई सेवाएं हैं जो स्वचालित रूप से आपके लिए यह कर देंगी।

सबसे आसान तरीकों में से एक है Cloudflare (मुफ्त योजना उपलब्ध) का उपयोग करना। बस अपनी सभी फ़ाइलों को उनके इंटरफ़ेस के माध्यम से अपलोड करें, फिर उनके सेटिंग टैब के अंतर्गत "छोटा करें" विकल्प का उपयोग करें।

वे आपको अपने सर्वर पर प्रत्येक फ़ाइल के लिए एक कस्टम URL देंगे, जो फिर उन सभी फ़ाइलों को आपके विज़िटर के ब्राउज़र पर वापस भेजने से पहले उन्हें छोटा कर देता है। यह उनके लिए इसे बहुत तेज़ बनाता है क्योंकि उनके पास वेब के विभिन्न डोमेन से कई अनुरोधों के बजाय क्लाउडफ्लेयर से केवल एक अनुरोध है।

एक अन्य विकल्प JSPACK (भुगतान किया गया) है, जो समान है, लेकिन अधिक कार्यक्षमता और नियंत्रण प्रदान करता है कि अन्य संपीड़न उपकरणों की तुलना में बेहतर अनुकूलन प्रदर्शन परिणाम प्राप्त करने के लिए वास्तव में कितना कोड संपीड़ित/हटाया जाता है, विशेष रूप से लक्षित विशिष्ट परिस्थितियों के कारण डिफ़ॉल्ट रूप से प्रदान करेगा। कुछ अनुप्रयोगों को पूरी तरह से इंटरनेट पर कहीं और स्थित निर्दिष्ट निर्देशिका संरचना में निहित जावास्क्रिप्ट फ़ाइलों के भीतर निहित कुछ टुकड़ों के डेटा तक पहुंच की आवश्यकता हो सकती है ...

इसके अलावा, एक कस्टम लोगो और कस्टम ग्राफ़िक्स बनाया जा सकता है और आपकी HTML5 वेबसाइट/ऐप में रखा जा सकता है ताकि यह सुनिश्चित हो सके कि लोग आपको याद रखें।

शीर्षक और विवरण!

जावास्क्रिप्ट में लिखे गए पृष्ठों में HTML और CSS में लिखे गए पृष्ठों के समान ही बहुत से SEO मेटा टैग होने चाहिए। शीर्षक और विवरण दोनों मेटा टैग के लिए एक प्रभावी एसईओ रणनीति के आवश्यक घटक हैं।

वेब ब्राउज़र शीर्षक एसईओ मेटा तत्व दिखाएंगे, और खोज इंजन सामान्य रूप से इस जानकारी का उपयोग उन पृष्ठों के शीर्षक बनाने के लिए करेंगे जिन्हें उन्होंने अनुक्रमित किया है। भले ही यह वेब ब्राउज़र में नहीं दिखाया जाता है, फिर भी विवरण SEO मेटा तत्व का उपयोग खोज इंजन द्वारा अनुक्रमित किए गए पृष्ठों के लिए टेक्स्ट स्निपेट या विवरण उत्पन्न करने के लिए किया जा सकता है।

जावास्क्रिप्ट का उपयोग करके शीर्षक और विवरण एसईओ मेटा टैग को परिभाषित करने में कोई समस्या नहीं है क्योंकि यह पूरी तरह से मान्य विधि है।

Google के अनुसार, इन दोनों SEO मेटा टैग को संशोधित करने के लिए जावास्क्रिप्ट को नियोजित करना भी संभव है। लब्बोलुआब यह है कि शीर्षक और विवरण मेटा एसईओ मेटा को प्रत्येक पृष्ठ पर शामिल किया जाना चाहिए, जिसमें वे भी शामिल हैं जो ज्यादातर जावास्क्रिप्ट में लिखे गए थे।

अल्पविराम-प्रथम कोडिंग शैलियों और इसी तरह से छुटकारा पाएं।

सबसे पहले, आइए इसे इस तरह से हटा दें: कृपया कॉमा-फर्स्ट कोडिंग शैलियों को रोकें। वे पुराने दिनों से एक अवशेष हैं जब आप परिवर्तनीय घोषणाओं और पैरामीटर सूचियों को पंक्तिबद्ध करने के लिए जावास्क्रिप्ट में अल्पविराम का उपयोग कर सकते थे। यह अब मान्य नहीं है, और इसे पहले कभी भी कानूनी नहीं होना चाहिए था!

तो आपको कैसे पता चलेगा कि आपका कोड इस शैली का उपयोग कर रहा है? यह बताना आसान है: कॉमा (या रिक्त स्थान) द्वारा अलग किए गए एक ही पंक्ति पर बस एकाधिक कथन देखें। नीचे एक उदाहरण देखें:

 var x = 1; var y = 2; var z = 3;

यदि आपकी जावास्क्रिप्ट इस तरह दिखती है - या इससे भी बदतर, यदि इसमें प्रत्येक कथन के बीच रिक्त रेखाएँ हैं - तो इसे गंभीर काम करने की आवश्यकता है! सौभाग्य से, इन समस्याओं को ठीक करना बहुत मुश्किल नहीं है जब आप जानते हैं कि वे क्या हैं और उन्हें कहाँ देखना है।

जावास्क्रिप्ट को शरीर के नीचे (या पाद लेख) से लोड करें।

याद रखें कि जावास्क्रिप्ट को शरीर के नीचे से (या पाद लेख) और ऊपर से सीएसएस लोड किया जाना चाहिए।

ऐसा इसलिए है क्योंकि खोज इंजन शीर्ष पर शुरू करके और नीचे की ओर काम करके आपके वेब पेजों को क्रॉल करेंगे, इसलिए वे जावास्क्रिप्ट या सीएसएस फाइलों जैसी किसी चीज तक पहुंचने के बाद जो कुछ भी देखते हैं उसे अनदेखा कर देते हैं।

आपको इसके बारे में चिंता करने की ज़रूरत नहीं है यदि आप अतुल्यकालिक लोडिंग तकनीकों जैसे कि अजाक्स या आस्थगित स्क्रिप्ट का उपयोग कर रहे हैं क्योंकि ये विधियाँ समानांतर में फ़ाइलों को लोड करती हैं लेकिन फिर भी अनुक्रमण की अनुमति देती हैं।

CSS को सबसे ऊपर और JavaScript को सबसे नीचे रखें।

अपने पेज को सर्च इंजन के लिए ऑप्टिमाइज़ करने के सबसे आसान तरीकों में से एक है सीएसएस को सबसे ऊपर और जावास्क्रिप्ट को सबसे नीचे रखना। ऐसा इसलिए है क्योंकि ब्राउज़र जावास्क्रिप्ट से पहले सीएसएस लोड करेंगे। ऐसा करने के लिए, आप अपनी अनुक्रमणिका फ़ाइल में एक टैग जोड़ सकते हैं जो आपकी स्टाइलशीट को इंगित करता है और फिर एक अन्य टैग जोड़ सकता है जो आपकी जावास्क्रिप्ट फ़ाइल को संदर्भित करता है।

इसका कारण यह महत्वपूर्ण है कि यदि किसी के ब्राउज़र पर JS अक्षम है, तो वे साइट का उपयोग तब तक नहीं कर पाएंगे जब तक कि इसे ठीक से कोडित नहीं किया जाता है-जिसका अर्थ है कि पहले CSS डालना!

Gzip के साथ घटकों को संपीड़ित करें।

Gzip एक कम्प्रेशन एल्गोरिथम है जो फाइलों के आकार को कम करता है। इसका उपयोग जावास्क्रिप्ट और सीएसएस दोनों में किया जा सकता है, इसलिए आप इसका उपयोग उन सभी घटकों के लिए कर सकते हैं जिनका आप उपयोग कर रहे हैं।

सीडीएन या होस्टिंग प्रदाता पर अपलोड करने से पहले आपको अपने कोड को कंप्रेस करना होगा। Gzip कमी का अर्थ है कि जब कोई उपयोगकर्ता आपके पृष्ठ पर पहुँचता है तो आपको आवश्यकता से अधिक बाइट डाउनलोड करने की आवश्यकता नहीं होगी।

Gzip समर्थन सभी आधुनिक ब्राउज़रों में उपलब्ध है, इसलिए यह दोनों सिरों पर gzip जोड़ने योग्य है: ब्राउज़र-साइड और सर्वर-साइड (NodeJS)।

अपनी सामग्री को संपीड़ित करने के लिए, आपको gzip- आधारित संपीड़न का उपयोग करना होगा। आप इस टूल का उपयोग यह जांचने के लिए कर सकते हैं कि फ़ाइलें सही ढंग से संपीड़ित की गई हैं या नहीं।

सीएसएस अभिव्यक्तियों से बचें।

CSS एक्सप्रेशन CSS3 में पेश की गई एक विशेषता है जो आपको अपनी स्टाइलशीट में जावास्क्रिप्ट का उपयोग करने की अनुमति देती है। आप उनका उपयोग किसी संपत्ति के मूल्य को गतिशील रूप से बदलने या मानों की एक सरणी पर पुनरावृति करने के लिए भी कर सकते हैं।

लेकिन यही कारण है कि आपको CSS अभिव्यक्तियों का उपयोग नहीं करना चाहिए: उन्हें अनुकूलित करना मुश्किल है और ब्राउज़र के लिए आपकी स्टाइलशीट को कैश करना कठिन बना देता है (जो कि खराब है)। इसके अलावा, वे पुराने ब्राउज़र पर अनपेक्षित व्यवहार का कारण बन सकते हैं जो उनका समर्थन नहीं करते हैं। इसलिए हर कीमत पर इनका इस्तेमाल करने से बचें!

अंतिम शब्द

खोज के लिए अनुकूलित करने वाले तरीके से जावास्क्रिप्ट का उपयोग करना खोज परिणामों में उच्च रैंक करने का एक शानदार तरीका है। हालांकि, यह याद रखना महत्वपूर्ण है कि सभी उपयोगकर्ताओं के पास जावास्क्रिप्ट सक्षम नहीं है या आपकी साइट ब्राउज़ करते समय समान मात्रा में बैंडविड्थ उपलब्ध नहीं है।

ये सीमाएं प्रभावित कर सकती हैं कि आपकी वेबसाइट खोज रैंकिंग में कितना अच्छा प्रदर्शन करती है यदि एसईओ उद्देश्यों के लिए जावास्क्रिप्ट सामग्री को अनुकूलित करते समय उन्हें ध्यान में नहीं रखा जाता है, जैसे आपकी साइट पर किसी अन्य प्रकार की सामग्री को Google के एल्गोरिदम द्वारा माना जाएगा।